import React from 'react';
import { Modal, Form, Select, Input, InputNumber, Button } from 'antd';
import { DataManagementFormValues } from '../../types/device';

interface DataManagementModalProps {
  visible: boolean;
  onCancel: () => void;
  onSave: (values: DataManagementFormValues) => void;
}

const DataManagementModal: React.FC<DataManagementModalProps> = ({
  visible,
  onCancel,
  onSave
}) => {
  const [form] = Form.useForm<DataManagementFormValues>();

  const handleOk = async () => {
    try {
      const values = await form.validateFields();
      onSave(values);
      form.resetFields();
    } catch (error) {
      // 表单验证失败，不执行任何操作
    }
  };

  const handleCancel = () => {
    form.resetFields();
    onCancel();
  };

  return (
    <Modal
      title="添加数据"
      open={visible}
      onOk={handleOk}
      onCancel={handleCancel}
      width={600}
      footer={[
        <Button key="cancel" onClick={handleCancel}>
          取消
        </Button>,
        <Button key="save" type="primary" onClick={handleOk}>
          保存
        </Button>
      ]}
    >
      <Form
        form={form}
        layout="vertical"
        name="data_management_form"
      >
        <Form.Item
          name="dataName"
          label="数据名称"
          rules={[{ required: true, message: '请输入数据名称' }]}
        >
          <Input placeholder="请输入数据名称" />
        </Form.Item>

        <Form.Item
          name="dataKey"
          label="数据标识"
          rules={[{ required: true, message: '请输入数据标识' }]}
        >
          <Input placeholder="请输入数据标识" />
        </Form.Item>

        <Form.Item
          name="readWriteMode"
          label="读写方式"
          rules={[{ required: true, message: '请选择读写方式' }]}
        >
          <Select placeholder="请选择读写方式">
            <Select.Option value="read">只读R</Select.Option>
            <Select.Option value="readWrite">读写RW</Select.Option>
          </Select>
        </Form.Item>

        <Form.Item 
          name="dataFormat"
          label="数据格式" 
          rules={[{ required: true, message: '请选择数据格式' }]}
        >
          <Select placeholder="请选择数据格式">
            <Select.Option value="uint16">16位无符号数UINT16</Select.Option>
            <Select.Option value="int16">16位有符号数INT16</Select.Option>
            <Select.Option value="uint32">32位无符号数UINT32</Select.Option>
            <Select.Option value="int32">32位有符号数INT32</Select.Option>
            <Select.Option value="float32">32位浮点型数FLOAT32</Select.Option>
          </Select>
        </Form.Item>

        <Form.Item 
          name="byteOrder"
          label="数据顺序" 
          rules={[{ required: true, message: '请选择数据顺序' }]}
        >
          <Select placeholder="请选择数据顺序">
            <Select.Option value="abcd">AB CD 大端形式</Select.Option>
            <Select.Option value="badc">BA DC 大端单字节反转</Select.Option>
            <Select.Option value="cdab">CD AB 小端单字节反转</Select.Option>
            <Select.Option value="dcba">DC BA 小端形式</Select.Option>
          </Select>
        </Form.Item>

        <Form.Item 
          name="storage"
          label="存储策略" 
          rules={[{ required: true, message: '请选择存储策略' }]}
        >
          <Select placeholder="请选择存储策略">
            <Select.Option value="30s">30s</Select.Option>
            <Select.Option value="1min">1min</Select.Option>
            <Select.Option value="5min">5min</Select.Option>
          </Select>
        </Form.Item>

        <Form.Item 
          name="precision"
          label="数据精度" 
          rules={[{ required: true, message: '请选择数据精度' }]}
        >
          <Select placeholder="请选择数据精度">
            {[0,1,2,3,4,5,6].map(level => (
              <Select.Option key={level} value={level}>{level} - 保留到小数点后{level}位</Select.Option>
            ))}
          </Select>
        </Form.Item>

        <Form.Item name="formulaToDevice" label="公式处理(平台->设备)">
          <Input placeholder="请输入公式" />
        </Form.Item>

        <Form.Item name="formulaToPlatform" label="公式处理(设备->平台)">
          <Input placeholder="请输入公式" />
        </Form.Item>
      </Form>
    </Modal>
  );
};

export default DataManagementModal;